<script setup>
import { ref } from 'vue'

let props = defineProps(['entityDataItem'])
let entityDataItem = props.entityDataItem

</script>


<template>
    <div class="model301-box">
        <div class="model301-box-son">
            <div class="row1">
                <div class="li1">
                    <img :src="entityDataItem.image0" alt="">
                </div>
                <div class="li2">
                    <div class="top">
                        <p>{{ entityDataItem.field11 }}</p>
                    </div>
                    <div class="bottom">
                        <p>{{ entityDataItem.field12 }}</p>
                    </div>
                </div>
            </div>
            <div class="row2">
                <div class="li1">{{ entityDataItem.field13 }}</div>
                <div class="li2">
                    <p>{{ entityDataItem.field21 }}</p>
                </div>
            </div>
            <div class="row3">
                <div class="li1">{{ entityDataItem.field22 }}</div>
                <div class="li2">
                    <p>{{ entityDataItem.field23 }}</p>
                </div>
            </div>
            <div class="row4">
                <div class="li1">{{ entityDataItem.field32 }}</div>
                <div class="li2">
                    <p>{{ entityDataItem.field33 }}</p>
                </div>
            </div>
        </div>
    </div>

</template>


<style scoped>
.model301-box {
    width: 100%;
    background-color: rgb(247, 247, 247);
    padding: 0.4rem 0.3rem;
    margin-bottom: 0.4rem;
}

.model301-box-son {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
}

.model301-box-son>div {
    width: 100%;
}

.model301-box-son>.row1 {
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: center;
    padding-left: 1.4rem;
}

.model301-box-son>.row1 .li1 {
    width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model301-box-son>.row1 .li1>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

.model301-box-son>.row1 .li2 {
    margin-left: 0.2rem;
    color: rgb(133, 133, 133);
}

.model301-box-son>.row1 .li2>.top {
    margin-left: 0.2rem;
    font-size: 0.9rem;
    color: rgb(125, 125, 125);
}

.model301-box-son>.row1 .li2>.bottom {
    margin-left: 0.2rem;
    font-size: 0.8rem;
    color: rgb(149, 149, 149);
}

.model301-box-son>.row2,
.model301-box-son>.row3,
.model301-box-son>.row4 {
    width: 100%;
    display: flex;
    color: rgb(112, 112, 112);
}

.model301-box-son>.row2 .li1,
.model301-box-son>.row3 .li1,
.model301-box-son>.row4 .li1 {
    width: 20%;
    height: 100%;
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.model301-box-son>.row2 .li2,
.model301-box-son>.row3 .li2,
.model301-box-son>.row4 .li2 {
    width: 80%;
    font-size: 0.9rem;
    color: rgb(112, 112, 112);
    text-align: left;
}

.model301-box-son>.row2 .li2>p {
    width: 100%;
    height: 100%;
    overflow-wrap: break-word;
    line-height: 1rem;
    max-height: 3rem;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>
